<template>
	<view>
		<view v-if="list && list.length>0" style="margin-left:4% ;" :style="{'height': height+'rpx', 'width': width?(width+'rpx'):'92%'}"
			class="swiper-container" @touchstart="touchStart" @touchend="touchEnd">
			<view class="swiper-left" @tap="toSlideLeft">
				<image src="../../static/user/black/swiper-left.png" mode="aspectFit"></image>
			</view>
			<view class="swiper-right" @tap="toSlideRight">
				<image src="../../static/user/black/swiper-right.png" mode="aspectFit"></image>
			</view>
			
			<view class="swiper-item"  v-for="(item, index) in list" :key="index"
				:style="{'transform': styleList[index].transform, 'z-index': styleList[index].zIndex, 'opacity': styleList[index].opacity,'display':styleList[index].display}">
				<!-- @click="itemClick(index)" -->
				<view class="wrap"
					@click="itemClick(index)"
					:style="{'width': showNum==5 && list.length>=5?'68%':'68%'}"
					:class="ktheme == 'black' ? 'item-border-black': 'item-border-white'">
					<view class="wrap-bg" :style="{'background-color': ktheme == 'black' ?'#000000':'rgba(0, 0, 0,0.4)'}">
						<image class="wrap-bg-black" src="../../static/user/black/user-cardBg-black.png" mode="scaleToFill"></image>						
						<view class="title-row" :style="ktheme == 'black' ? 'color: #FFD38C;' :'color: #ffffff;'">
							<text class="title-text">持有数量 {{item.ownQuantity || 0}}</text>
							<text class="title-text">版权商品</text>
							<text class="title-text"></text>
						</view>
						<view class="wrap-content" :style="ktheme == 'black' ? 'color: #FFD38C;' :'color: #ffffff;'">
							<image :id="index" class="prd-image" mode="aspectFit" :src="isObj(item)?item.image:item"></image>
							<text class="prd-title">{{item.name}}</text>
						</view>
					</view>
					
					<!-- <image :id="index" class="image"  :src="isObj(item)?item.imgUrl:item"></image> -->
					<view v-if="isObj(item) && item.imgDesc" :class="['image-desc',descAniType,{curr:curr==index}]">{{item.imgDesc}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="sw-con" v-if="showDot">
			<view class="t-dot-con">
				<view class="t-dot-active" :style="{left: 40 * curr + 'rpx',background: dotSelectedColor}"></view>
				<block v-for="(dot,idx) in list.length" :key="idx">
					<view class="t-dot-wrap">
						<view :class="['t-dot',{'active' : idx==curr}]" :style="{background:dotColor}"></view>
					</view>
				</block>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			/**calc(100% - )
			 * 图片url列表，内部结构为Object，示例{"imgUrl":"http://www.abc.com/a.jpg","imgDesc":"我是描述文字"}
			 */
			list: {
				type: Array,
				default: []
			},
			/**
			 * swiper高度--单位rpx
			 */
			height: {
				type: Number,
				default: 690
			},
			/**
			 * 显示图片个数，仅支持3或5，默认3
			 */
			showNum: {
				type: Number,
				default: 3
			},
			/**
			 * swiper宽度--单位rpx
			 */
			width: {
				type: Number,
				default: undefined
			},
			/**
			 * 是否自动播放
			 */
			autoPlay: {
				type: Boolean,
				default: false
			},
			/**
			 * 自动播放间隔毫秒
			 */
			autoPlayInterval: {
				type: Number,
				default: 5000
			},
			/**
			 * 是否显示轮播指示点
			 */
			showDot: {
				type: Boolean,
				default: false
			},
			/**
			 * 图片描述文字动画类型：slideFromRight、slideFromBottom、scaleX、scaleY
			 */
			descAniType: {
				type: String,
				default: "slideFromRight"
			},
			/**
			 * 指示点未选中背景色，支持css颜色值及渐变
			 */
			dotColor: {
				type: String,
				default: "linear-gradient(to bottom, #999999, #c0c0c0)"
			},
			/**
			 * 指示点选中背景色，支持css颜色值及渐变
			 */
			dotSelectedColor: {
				type: String,
				default: "linear-gradient(to bottom, #92ffc0, #002661)"
			},
		},
		data() {
			return {
				curr: 0,
				/**
				 * 开始触摸点坐标
				 */
				start: {
					x: 0,
					y: 0
				},
				/**
				 * 每个item样式列表
				 */
				styleList: [],
				timer: undefined,
			};
		},
		created() {
			this.isObj({});
			this.initSwiper();
		},
		watch: {
			list(newVal, oldVal) {
				this.curr = 0;
				this.start = {
					x: 0,
					y: 0
				};
				this.styleList = [];
				this.closeTimer();
				this.initSwiper();
			}
		},
		methods: {
			//初始化swiper
			initSwiper() {
				if (this.list && this.list.length > 0) {
					this.list.forEach((item, index) => {
						this.styleList.push(this.addStyle(index))
					});
					this.openTimer();
				}
			},
			swiperLeft(){
				
			},
			swiperRight(){
				
			},
			//开启自动定时器
			openTimer() {
				if (this.autoPlay === true && this.list.length > 1 && !this.timer) {
					this.timer = setInterval(() => {
						this.curr = (this.curr == this.list.length - 1) ? 0 : (this.curr + 1);
						this.toSlideLeft();
					}, this.autoPlayInterval);
				}
			},
			//关闭自动定时器
			closeTimer() {
				if (this.autoPlay === true && this.list.length > 1) {
					clearInterval(this.timer);
					this.timer = undefined;
				}
			},
			/**
			 * 计算每个item样式
			 * @param {Object} idx
			 */
			addStyle(idx) {
				const len = this.list.length;
				let sn = this.showNum == 5 && this.list.length >= 5 ? 2 : 1;
				if (idx > len / 2) {
					//这里是数组后一半的item放在左边,平移位置由远到近，例如共6个，后2个处理在这里
					var left = len - idx;
					return {
						transform: 'scale(' + (1 - left / 40) + ') translate(-' + (left * 9) + '%,0px)',
						zIndex: 9999 - left,
						opacity: 0.8 / left,
						display: idx >= len - sn ? "block" : "none"
					}
				} else {
					//这里是数组前一半item放在右边，平移位置由近到远，例如共6个，前4个处理在这里，这里第一个元素始终放在中间位置
					return {
						transform: 'scale(' + (1 - idx / 40) + ') translate(' + (idx * 9) + '%,0px)',
						zIndex: 9999 - idx,
						opacity: 0.8 / (idx === 0 ? 0.8 : idx),
						display: idx > sn ? "none" : "block"
					}
				}
			},
			/**
			 * 触摸开始
			 * @param {Object} e
			 */
			touchStart(e) {
				this.start.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.start.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
				this.closeTimer();
			},
			/**
			 * 触摸结束
			 * @param {Object} e
			 */
			touchEnd(e) {
				this.openTimer();
				var len = this.styleList.length;
				let tx = e.changedTouches[0].pageX - this.start.x
				let ty = e.changedTouches[0].pageY - this.start.y
				if (Math.abs(tx) > Math.abs(ty)) {
					//左右方向滑动
					if (tx === 0) { //点击事件拦截
						return;
					}
					if (tx < 0) {
						// 向左滑动--手指向左滑动
						this.curr = (this.curr === len - 1) ? 0 : (this.curr + 1)
						this.toSlideLeft()
					} else if (tx > 0) {
						// 向右滑动--手指向右滑动
						this.curr = (this.curr === 0) ? (len - 1) : (this.curr - 1);
						this.toSlideRight()
					}
				} else {
					//这里就不处理上下方向的事件了，有此需求的同仁可以在这里写逻辑
					//上下方向滑动
					if (tx === 0) { //点击事件拦截
						return;
					}
					if (ty < 0) {
						// 向上滑动
					} else if (ty > 0) {
						// 向下滑动
					}
				}
			},
			// 向左滑动--手指向左滑动
			toSlideLeft() {
				var newStyleList = JSON.parse(JSON.stringify(this.styleList))
				var last = [newStyleList.pop()]
				newStyleList = last.concat(newStyleList)
				this.styleList = newStyleList
				//触发change事件
				this.$emit('change', this.curr);
			},
			// 向右滑动--手指向右滑动
			toSlideRight() {
				var newStyleList = JSON.parse(JSON.stringify(this.styleList))
				var first = [newStyleList.shift()]
				newStyleList = newStyleList.concat(first)
				this.styleList = newStyleList
				//触发change事件
				this.$emit('change', this.curr);
			},
			/**
			 * 当前item点击返回索引下标
			 * @param {Object} idx
			 */
			itemClick(idx) {
				console.log('数据')
				this.$emit('click', idx);
			},
			//是否为对象
			isObj(o){
				try{
					return typeof o === "object" && o !== null;
				}catch(e){
					return false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-container {
		box-sizing: border-box;
		height: 760rpx;
		width: 100%;
		overflow: hidden;
		position: relative;
		.swiper-left{
			position: absolute;
			width: 60rpx;
			height: 120rpx;
			left: 30rpx;
			top: 40%;
			z-index: 99998;
			image{
				top: 20%;
				left:20%;
				width: 50%;
				height: 50%;
			}
		}
		.swiper-right{
			position: absolute;
			width: 60rpx;
			height: 120rpx;
			right: 30rpx;
			top: 40%;
			z-index: 99998;
			image{
				top: 20%;
				left:20%;
				width: 50%;
				height: 50%;
			}
			
		}
		.item-border-black{
			padding: 0;
			margin: 0 auto;
			border: 1px solid #FFD38C;
			border-radius: 15rpx;
		}
		.item-border-white{
			padding: 0;
			margin: 0 auto;
			background: linear-gradient(135deg, #5746d5 0%, #9f4fc6 100%);
			border-radius: 15rpx;
			border: 6rpx solid ;
			border-image: linear-gradient(135deg, #5746d5 0%, #9f4fc6 100%) 15 15 15;
				clip-path: inset(0 round 15rpx);
		}
		.swiper-item {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all .5s;

			//需要缩放动画的话注释下方放开这个
			.wrap {
				height: 100%;
				width: 90%;
				// margin: 2rpx auto;
				position: relative;
				overflow: hidden;
				
				.wrap-bg {
					width: 66%;
					// calc(90% - 88rpx);
					height: calc(100% - 16rpx);
					position: fixed;
					border-radius: 15rpx;
					padding: 20rpx;
				}
				.wrap-bg-black {
					width: 61%;
					height: 92%;
					position: fixed;
				}
				.title-row{
					width: 100%;
					margin-top: 14rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					.title-text{
						width: 30%;
						font-size:20rpx;
						font-weight: bold;
						text-align: center;
					}
				}
				.wrap-content{
					margin-top: 128rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					.prd-image{
						width: 320rpx;
						height: 320rpx;
					}
					.prd-title{
						font-size: 28rpx;
						text-align: center;
						width: 88%;
						margin-top: 20rpx;
					}
					.prd-subtitle{
						margin-top: 15rpx;
						color: #D9ECB1;
						font-size: 20rpx;
						overflow: hidden;
					    text-overflow: ellipsis;
					    width: 84%;
					    display: -webkit-box;
					    -webkit-box-orient: vertical;
					    -webkit-line-clamp: 4;
					    word-break: break-all;
					}
					.prd-showDetail{
						// width: 400rpx;
						margin-top: 80rpx;
						color: #B1A94C;
						font-size: 24rpx;
						 text-decoration: underline;

					}
				}
				.image {
					height: 100%;
					width: 100%;
					border-radius: 10rpx;
					// box-shadow: 0 0 10rpx #333;//加阴影的话去掉注释即可
				}

				.image-desc {
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
					height: 60rpx;
					padding: 0rpx 20rpx;
					background: rgba(0, 0, 0, 0.3);
					line-height: 60rpx;
					box-sizing: border-box;
					text-align: left;
					position: absolute;
					bottom: 0rpx;
					color: #ffffff;
					border-radius: 0rpx 0rpx 10rpx 10rpx;
					opacity: 0;
					transition: all 1s ease-out;

					//动画类型slideFromRight
					&.slideFromRight {
						transform: translateX(100%);

						&.curr {
							opacity: 1;
							transform: translateX(0);
						}
					}

					//动画类型slideFromBottom
					&.slideFromBottom {
						transform: translateY(100%);

						&.curr {
							opacity: 1;
							transform: translateY(0);
						}
					}

					//动画类型scaleX
					&.scaleX {
						transform: scaleX(0);

						&.curr {
							opacity: 1;
							transform: scaleX(1);
						}
					}

					//动画类型scaleX
					&.scaleY {
						transform: scaleY(0);

						&.curr {
							opacity: 1;
							transform: scaleY(1);
						}
					}
				}
			}
		}


	}

	.sw-con {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		margin-top: 25rpx;

		.t-dot-con {
			display: inline-block;
			box-sizing: border-box;
			position: relative;
		}

		.t-dot-wrap {
			width: 40rpx;
			height: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			float: left;

		}

		.t-dot {
			width: 20rpx;
			height: 20rpx;
			// background: linear-gradient(to bottom, #666666, #999999);
			// background: -webkit-linear-gradient(to bottom, #666666, #999999);
			// opacity: 0.3;
			border-radius: 50%;
			transition: all 200ms ease-out;
			float: left;

			&.active {
				background: rgba(0, 0, 0, 0) !important;
			}
		}

		.t-dot-active {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 40rpx;
			height: 20rpx;
			border-radius: 20rpx;
			transition: all .3s ease-in-out;
			z-index: 1;
			// background: linear-gradient(to bottom, #92ffc0, #002661);
			// background: -webkit-linear-gradient(to bottom, #92ffc0, #002661);
		}

	}
</style>